<template>
  <div class="table-box">
    <ProTable ref="proTable" title="部门列表" :columns="columns" :request-api="getDepartMentList" :data-callback="dataCallback">
      <!-- :init-param="initParam" -->
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button v-auth="'add'" type="primary" :icon="CirclePlus" @click="openDialog('新增', { status: 1 })">
          新增部门
        </el-button>
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button v-auth="'view'" type="primary" link :icon="View" @click="openDialog('查看', scope.row)"> 查看 </el-button>
        <el-button v-auth="'edit'" type="primary" link :icon="EditPen" @click="openDialog('编辑', scope.row)"> 编辑 </el-button>
        <el-button v-auth="'delete'" type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <DepartDialog ref="dialogRef" />
  </div>
</template>

<script setup lang="tsx" name="departManager">
import { ref } from "vue";
import { Operation } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import DepartDialog from "@/views/operation/components/DepartDialog.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { CirclePlus, EditPen, View, Delete } from "@element-plus/icons-vue";
import { getDepartMentList, editDepartment, createDepartment, deleteDepartment } from "@/api/modules/operation";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
// const initParam = reactive({ storeId: 0 });

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  return {
    list: data.list,
    total: data.total,
    pageNum: data.pageNum,
    pageSize: data.pageSize
  };
};

// 表格配置项
const columns: ColumnProps<Operation.ResDepartmentList>[] = [
  { type: "index", label: "序号", width: 60 },
  { prop: "number", sortable: true, label: "部门编码", align: "left", minWidth: 120, search: { el: "input" } },
  { prop: "name", sortable: true, label: "部门名称", minWidth: 120, align: "left", search: { el: "input" } },
  // {
  //   prop: "roleIds",
  //   label: "部门职能",
  //   enum: [
  //     { label: "出品部门", value: 1 },
  //     { label: "行政部门", value: 2 },
  //     { label: "销售部门", value: 3 }
  //   ],
  //   isFilterEnum: false,
  //   align: "left",
  //   search: { el: "select", multiple: true, props: { filterable: true } }
  // },
  {
    prop: "status",
    label: "状态",
    minWidth: 120,
    sortable: true,
    align: "left",
    enum: [
      { label: "启用", value: 1 },
      { label: "禁用", value: 2 }
    ]
  },
  { prop: "createTime", sortable: true, label: "创建时间", minWidth: 164, align: "left" },
  { prop: "updateName", sortable: true, label: "最后修改人", minWidth: 120, align: "left" },
  { prop: "updateTime", sortable: true, label: "最后更新时间", minWidth: 164, align: "left" },
  { prop: "operation", label: "操作", fixed: "right", width: 220 }
];

// 删除部门
const deleteAccount = async (params: Operation.ResDepartmentList) => {
  await useHandleData(deleteDepartment, { id: params.id }, `删除【${params.name}】资料`);
  proTable.value?.getTableList();
};

// 打开 drawer(新增、查看、编辑)
const dialogRef = ref<InstanceType<typeof DepartDialog> | null>(null);
const openDialog = (title: string, row: Partial<Operation.ResDepartmentList> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? createDepartment : title === "编辑" ? editDepartment : undefined,
    getTableList: proTable.value?.getTableList
  };
  dialogRef.value?.acceptParams(params);
};
</script>
